<template>
    <div class="flex flex-col h-screen bg-gray-100">
        <div class="p-2 text-white bg-gradient-to-r from-red-500 to-red-300">
            <div class="grid w-8 h-8 place-content-center" @click="router.go(-2)">
                <IMingcute:left-fill class="text-lg" />
            </div>
        </div>
        <div class="overflow-hidden grow">
            <UpPullLoad @trigger="loadMore">
                <div class="pb-4 text-sm text-center text-white bg-gradient-to-r from-red-500 to-red-300">
                    <div class="w-5/6 mx-auto space-y-2">
                        <div>
                            <IOoui:success class="mx-auto text-4xl text-green-500" />
                        </div>
                        <div>支付成功</div>
                        <div class="text-xl">¥ 998</div>
                    </div>
                    <div class="flex items-center justify-center mt-2 space-x-4 text-sm">
                        <div class="px-4 py-1 border rounded-full" @click="router.replace({
                            name: 'shop'
                        })">回到首页</div>
                        <div class="px-4 py-1 border rounded-full" @click="router.replace({
                            name:'me-order-detail',
                            params:{
                                id:1
                            }
                        })">查看订单</div>
                    </div>
                </div>

                <div class="p-4 rounded-t-lg ">
                    <div class="w-12 h-2 mx-auto mb-4 bg-gray-100 rounded-full"></div>
                    <Goods :data="goods" />
                </div>
            </UpPullLoad>
        </div>
    </div>
</template>
    
<script setup lang='ts'>
import { tmpData } from '~/views/home/tmp';
const router = useRouter()

const goods = ref(
    tmpData.slice(0, 5)
);
const loadMore = ({ done }: any) => {
    setTimeout(() => {
        goods.value.push(
            ...tmpData.slice(0, 5)
        )
        done()
    }, 200)
}

</script>
    
<style></style>